<template>
	<u-modal :value="show" :showConfirmButton="false" closeOnClickOverlay>
		<view style="text-align: center;">
			<view class="title">恭喜！获得排队返现权益</view>
			<view class="flex flex-dir-c flex-ai-c main">
				<image style="width: 289rpx;height: 261rpx;" src="https://xy.outletds.com/uploads/icon/avoid.png">
				</image>
				<view class="rule" @click="rule">活动规则</view>
				<view class="flex flex-dir-c flex-jc-sb card">
					<view style="font-size: 48rpx;margin-top: 20rpx;">获得返现<text
							style="color: #FF6C0A;font-size: 90rpx;">{{rebateMoney}}</text>元</view>
					<view style="font-size: 18rpx;margin-bottom: 35rpx;">每位用户当月仅可参与一次排队返现活动。</view>
				</view>
				<view @click="receive" class="receive">
					领取权益
				</view>
			</view>
			<view class="flex flex-jc-c" style="margin-top: 40rpx;" @click="close">
				<u-icon name="close-circle" size="60rpx" color="#999999" />
			</view>
		</view>
	</u-modal>
</template>

<script>
	export default {
		name: 'activity',
		props: {
			show: {
				type: Boolean,
				default: false
			},
			rebateMoney: {
				type: [Number, String],
				default: 0
			}
		},
		data() {
			return {

			}
		},
		methods: {
			close() {
				uni.showModal({
					title: '提示',
					content: '确定要放弃权益吗？',
					cancelText: "取消", // 取消按钮的文字  
					confirmText: "确认", // 确认按钮的文字  
					success: (res) => {
						if (res.confirm) {
							this.$emit('rejectProfit')
						}
					}
				})
			},
			receive() {
				this.$emit('receive')
			},
			rule() {
				uni.navigateTo({
					url: '/pages/me/rule'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 48rpx;
		font-weight: 500;
		color: #FFE2B4;
		margin-bottom: 66rpx;
	}

	.rule {
		width: 128rpx;
		height: 43rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 100rpx 0rpx 0rpx 100rpx;
		font-size: 23rpx;
		color: #FFFFFF;
		line-height: 43rpx;
		position: absolute;
		right: 0;
		top: 116rpx;
	}

	.main {
		width: 600rpx;
		height: 743rpx;
		background: linear-gradient(180deg, #FFECCB 0%, #FFFFFF 100%);
		border-radius: 70rpx;
		position: relative;

		.card {
			width: 90%;
			height: 228rpx;
			background: #FFEEBA;
			border-radius: 30rpx;
			margin: 0 0 22rpx 22rpx;
		}

		.receive {
			width: 350rpx;
			height: 110rpx;
			font-size: 42rpx;
			background: linear-gradient(180deg, #FF251D 0%, #FCD0A4 100%);
			border-radius: 55rpx;
			color: #fff;
			text-align: center;
			line-height: 110rpx;
			margin-bottom: 55rpx;
		}
	}
</style>